<template>
    <!-- 轮播图展示 -->
    <p class="demonstration">
      展示区
    </p>
    <el-carousel height="300px">
      <el-carousel-item v-for="item in banner" :key="item.bannerid">
        <img :src="item.img" alt="">
      </el-carousel-item>
    </el-carousel>

    <hr style="margin-top:10px;border-width: 3px;"/>

    <!-- 轮播图管理 -->
    <el-table :data="banner" style="width: 100%">
      <el-table-column label="索引" align="center" width="100">
        <template #default="scope">
          <div style="align-items: center;">
            <span>{{ scope.$index+1 }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="Alt" min-width="200" align="center">
        <template #default="scope">
          <div style="align-items: center;">
            <span>{{ scope.row.alt }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="轮播图" width="150"  align="center">
        <template #default="scope">
          <div style="align-items: center;width:150px;height: 100px;text-align: center;">
            <img :src="scope.row.img" style="width:100%;">
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="删除" align="center">
        <template #header>
          <el-button type="danger" @click="handleRemoveAll">全部删除</el-button>
        </template>
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

</template>
<script setup>
    import { ref,onMounted } from 'vue';
    import { bannerDataApi,bannerDeleteApi,bannerRemoveAllApi } from '../../../../api/banner'

    // 请求轮播图
    let banner = ref();
    const getBannerData = async () => {
      try {
        const bannerData = await bannerDataApi()
        banner.value = bannerData.data;
        // console.log('轮播图数据', banner.value);
      } catch (error) {
        console.log('这是一个错误提示', error);
      }
    }

//////////////////////////////////////////


    const handleEdit = (index, row) => {
      console.log(index, row)
    }

    const handleDelete = async (index, row) => {
      try{
        const res = await bannerDeleteApi(row.bannerid)
        getBannerData();
      }catch{
        console.log('出错了');
      }
      
    }
    const handleRemoveAll = async () => {
        const res = await bannerRemoveAllApi(row.bannerid)
        console.log(res);
        getBannerData();
    }

    onMounted(
      ()=>getBannerData()
    );
</script>
<style lang="scss" scoped>
.demonstration {
  min-width: 550px;
  font-size: 20px;
  color: var(--el-text-color-secondary);
  border: 1px solid #000;
  text-align: center;
}
.el-carousel{
  min-width: 550px;
}
.el-table{
  text-align: center;
}
.el-carousel__item img {
  width: 100%;
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>